<template>
  <zm-view ref="view" background="#fff">
    <view class="p-24">
      <view class="input-wrap">
        <u-input v-model="form.cardCode" :placeholder="`${cardName}号不区分大小写`" font-size="28rpx" clearable border="none"></u-input>
      </view>
      <view class="input-wrap mt-20">
        <u-input v-model="form.passwd" :placeholder="`${cardName}密码不区分大小写`" font-size="28rpx" clearable border="none"></u-input>
      </view>
      <text class="flex text-ccc mt-12">若无{{ cardName }}密码，请联系在线客服进行查询。</text>
      <view class="flex flex-col mt-40">
        <zm-button round plain height="100rpx" :border-color="useColor('theme')" :text-color="useColor('theme')" @click="onBindCoupon">手动绑定</zm-button>
        <zm-button v-if="isShowScan" custom-class="mt-30" type="primary" round height="100rpx" @click="onScanBind">
          <view class="flex items-center">
            <zm-icon name="scan" color="#fff" size="40rpx"></zm-icon>
            <text class="ml-12">扫码绑定</text>
          </view>
        </zm-button>
      </view>
    </view>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import hook from "@/mixins/hook"
import { mapGetters } from "vuex"
export default {
  mixins: [page, hook],
  data() {
    return {
      routes: [],
      form: {
        cardCode: "",
        passwd: ""
      }
    }
  },
  computed: {
    ...mapGetters(["webEvn", "webEnv", "cardName"]),
    isShowScan() {
      let show = true
      // #ifdef WEB
      const evns = ["ysf"]
      show = evns.includes(this.webEvn) || this.webEnv == "wxWeb"
      // #endif
      return show
    }
  },
  onShow() {
    this.routes = getCurrentPages()
  },
  methods: {
    // 绑定
    async onBindCoupon() {
      if (this.form.cardCode && this.form.passwd) {
        const res = await uni.$api.card.bindCard(this.form)
        this.form.cardCode = ""
        this.form.passwd = ""
        if (res.bindType === "couponCard") {
          uni.$setCache("couponBindTips", res.message)
          uni.$toView({ type: "redirectTo", url: "pages/person/coupon-list/coupon-list" })
        } else {
          uni.$setCache("cardBindTips", `已绑定${res.bindNum || 1}张卡`)
          if (this.routes.length == 1) {
            this.toView({
              url: "pages/person/coupon-list/coupon-list",
              type: "redirectTo"
            })
          } else {
            uni.navigateBack()
          }
        }
      } else {
        uni.$toast("请先输入卡号和卡密码")
      }
    },
    // 二维码绑定
    async handleQrCodeBind(code) {
      const result = await this.$api.card.qrCodeBind({ qrCode: code })
      uni.$emit("refreshCardList")
      this.mitt?.emit("deco-person-property-bar.refresh")
      if (result.bindType == "coupon") {
        uni.$setCache("couponBindTips", `已绑定${result.bindNum || 1}张券`)
        uni.$toView("pages/person/coupon-list/coupon-list")
      } else if (result.bindType == "card") {
        uni.$setCache("cardBindTips", `已绑定${result.bindNum || 1}张卡`)
        uni.$toView("pages/person/film-card-list/film-card-list")
      } else if (result.bindType == "batchCoupon") {
        uni.$setCache("couponBindTips", `已绑定${result.bindNum || 1}张券`)
        uni.$toView("pages/person/coupon-list/coupon-list")
      } else if (result.bindType == "couponCard") {
        uni.$setCache("couponBindTips", result.message)
        uni.$toView("pages/person/coupon-list/coupon-list")
      } else {
        if (this.routes.length == 1) {
          this.toView({
            url: "pages/person/coupon-list/coupon-list",
            type: "redirectTo"
          })
        } else {
          uni.navigateBack()
        }
      }
    },
    onScanBind() {
      // #ifdef WEB
      uni.$auth.sdk.scanQRCode({
        success: (res) => this.handleQrCodeBind(res.result)
      })
      // #endif
      // #ifndef WEB
      uni.scanCode({
        success: (res) => this.handleQrCodeBind(res.result)
      })
      // #endif
    }
  }
}
</script>

<style lang="scss" scoped>
.input-wrap {
  height: 100rpx;
  display: flex;
  padding: 0 24rpx;
  overflow: hidden;
  align-items: center;
  border-radius: 10rpx;
  background-color: #f4f6f7;
}
</style>
